<!--
 * @Author: 谢小康 2170673706@qq.com
 * @Date: 2024-01-08 19:17:19
 * @LastEditors: 谢小康 2170673706@qq.com
 * @LastEditTime: 2024-02-01 15:24:36
 * @FilePath: \My-bolg\My_Blog\src\components\Rightbox.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="right-box">
        <RightTop :user="user"></RightTop>
        <Recommendedarticles></Recommendedarticles>
        <div class="right-boxitem right-siteinfo">
            <h1>网站信息</h1>
            <div class="siteinfo-item">
                <li>
                    <span>文章数目:</span>
                    <span>{{ baseinfo.articlenum }}</span>
                </li>
                <li>
                    <span>网站运行天数:</span>
                    <span>{{ baseinfo.time }}天</span>
                </li>
                <li>
                    <span>网站浏览量:</span>
                    <span>{{ baseinfo.Bolog_view }}</span>
                </li>
            </div>
        </div>
    </div>
</template>

<script setup>
import RightTop from './RightTop.vue';
import { ref, onMounted } from 'vue';
import { getconfig } from "@/api/user.js"
import Recommendedarticles from './Recommendedarticles.vue';
import { getarticlenum } from "@/api/article.js"
import moment from 'moment';
let user = ref({
    url: "",
    touxiang: "",
    title: "",
    Bolog_sign: ""
})
let baseinfo = ref({
    articlenum: "",
    time: "",
    Bolog_view: ""
})
onMounted(async () => {
    let res = await getconfig()
    if (res.data.status == 200) {
        user.value.url = res.data.data.data.Bolog_bkimg
        user.value.Bolog_sign = res.data.data.data.Bolog_sign
        user.value.touxiang = res.data.data.user.Users_corver
        user.value.title = res.data.data.user.Users_name
        baseinfo.value.Bolog_view = res.data.data.data.Bolog_view
        baseinfo.value.time = parseInt((new Date() - new Date(res.data.data.data.createdAt)) / 86400000)
    }
    let res2 = await getarticlenum()
    baseinfo.value.articlenum = res2.data.data
})
</script>

<style lang="scss" scoped>
.right-box {
    padding: 10px;
    
    .right-boxitem {
        width: 100%;
        border-radius: 15px;
        margin: 10px 0;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
        &:hover{
        transform: translateY(-3px);
        box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    } 
    }

    .right-siteinfo {
        @include userTheme {
            background-color: getThemeValue("rigthitemColor");
            font-family: getThemeValue("fontfamily");
        }

        width: 100%;
        padding: 15px;

        margin-bottom: 10px;

        h1 {
            font-size: $font-size-l;
        }

        li {
            display: flex;
            justify-content: space-between;
            font-size: $font-size-m;
            padding: 0 10px;
            margin: 8px 0;
        }
    }
}
</style>